<template>
<a-spin :spinning='loading'>
<div>
  <a-form :form="form" layout="inline">
    <a-row class='margin-bottom'>
      <a-col :span="8">
        <a-form-item label='设备类型'>
          <a-select  label-in-value :show-search="showSearch" placeholder='设备类型' :filter-option="filterOption" v-decorator="['deviceType',{rules:[{required:true,message:'请输入类型编码'}]}]" :options="deviceTypeList" style='width: 200px'>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span='8'>
    <a-form-item
      label="设备型号">
      <j-dict-select-tag  v-decorator="['deviceModel', {rules:[{required:true,message:'设备型号'}]}]" placeholder="请输入设备型号" :triggerChange="true" dictCode="device_model" style='width: 200px'/>
    </a-form-item>
      </a-col>

      <a-col :span="8">
        <a-form-item
          label="设备sn号">
          <a-input placeholder="请输入设备sn号" v-decorator="['deviceSn',{rules:[{type:'string',required: true,message:'输入设备sn号'}]}]" style='width: 200px' />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class='margin-bottom'>
      <a-col :span="10">
    <a-form-item
      label="通讯地址">
      <a-input placeholder="请输入通讯地址" v-decorator="['swapAddress', {}]" />
    </a-form-item>
      </a-col>
      <a-col :span="10">
    <a-form-item
      label="通讯方式">
      <a-input placeholder="请输入通讯方式" v-decorator="['swapType', {}]" />
    </a-form-item>
      </a-col>
    </a-row>
    <a-row class='margin-bottom'>
      <a-col :span="16">
        <a-form-item
          label="设备别名">
          <a-input style='width: 200px;' placeholder="请输入设备别名" v-decorator="['deviceAliasName', {rules:[{type:'string',required: true,message:'请选择区域'}]}]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row style="height: 7%;">
      <div style="text-align:center">
        <a-button @click="$emit('currentChange',0)">
          上一步
        </a-button>
        <a-button type="primary" style="margin-left: 60px" @click="handleOk">
          确认设置
        </a-button>
      </div>
    </a-row>

  </a-form>
</div>

</a-spin>
</template>

<script>
import { getAction } from '@api/manage'
import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil'

export default {
  name: 'DeviceInfoModal',
  components:{
  },
  props:{
    modalValue: {
      type:Object
    },
    deviceAliasName:{
      type:String
  },
},
  data(){
    return{
      validatorRules:{
        // deviceNum:{rules: [{ required: true, message: '请输入设备编号!' }]},
        projectRegionId:{rules: [{ required: true, message: '请输入项目区域id!' }]},
      },
      model:{},
      form: this.$form.createForm(this),
      showSearch:true,
      loading: false,
      deviceTypeList:[],
      url:{
        getDeviceType:"/devicetype/deviceType/getDeviceList"

      }
    }
  },
  created() {

    this.initDeviceType();
    this.initDictConfig();

  },
  mounted() {
    if(this.modalValue.id!==undefined&&this.modalValue.id!==null)
    {
      this.form.setFieldsValue({deviceModel:this.modalValue.deviceModel})
      this.form.setFieldsValue({deviceSn:this.modalValue.deviceSn})
      console.log(this.modalValue.deviceAlias)
      // this.form.setFieldsValue({deviceAliasName:this.modalValue.deviceAlias})
      this.form.setFieldsValue({swapAddress:this.modalValue.swapAddress})
      this.form.setFieldsValue({swapType:this.modalValue.swapType})

    }
  },
  methods:{

    initDictConfig() {
      this.loading = true
      //初始化字典 - 性别
      initDictOptions('device_model').then((res) => {
        if (res.success) {
          this.sexDictOptions = res.result;
        }
        this.loading = false
      });
    },
    customRender: (text, record, index) => {
      //字典值替换通用方法
      return filterDictText(this.sexDictOptions, text);
    },
    filterOption(input, option) {
      let com = option.componentOptions
      let name = String(com.propsData.label)
      if(name.toLowerCase().includes(input.toLowerCase())){
        return true
      }
    },
    handleOk(){
      this.form.validateFields((err, values) => {
        if (!err) {
          let formData = Object.assign(this.model, values)
          this.$emit('infoChange',formData)
          this.$emit('ok');
          this.visible = false;
        }
      })
    },
    initDeviceType() {
      this.$nextTick(() => {
        this.form.setFieldsValue({
          deviceAliasName: this.deviceAliasName
        })
      })
      this.loading = true

      getAction(this.url.getDeviceType).then((res)=>{
        this.deviceTypeList = [{value:"",label:"请选择设备类型编码"}]
        if(res.success){
          if(res.result!=null)
          {
            res.result.forEach(item=>{
              this.deviceTypeList.push({
                value:item.id,
                key:item.id,
                label:item.name
              })
            })
          }
          if(this.modalValue.id!==undefined&&this.modalValue.id!==null) {
            console.log("@@",this.deviceTypeList)
            let deviceType = this.deviceTypeList.find(item => {
              if (item.label === this.modalValue.deviceCode) {
                return true
              }
            })
            this.form.setFieldsValue({ deviceType: deviceType })
          }
          this.loading = false
        }
      })
    },
  }
}
</script>

<style scoped>
.margin-bottom{
  margin-bottom: 20px;
}
</style>